<template>
  <div class="electricity-info">
    <fieldset class="electricity-info-w">
      <legend>用电信息:</legend>
      <div>
        <el-form
          ref="ruleFormRef"
          :model="ruleForm"
          :rules="rules"
          label-width="120px"
          class="ruleForm"
          status-icon
        >
          <el-form-item label="用电类型" prop="eleType">
            <el-input v-model="ruleForm.eleType" />
            <el-button @click="showEleType">请选择</el-button>
          </el-form-item>
          <el-form-item label="变压器型号" prop="transformer">
            <el-select v-model="ruleForm.transformer">
              <el-option
                v-for="item in transformerData"
                :label="item.label"
                :value="item.label"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="变压器容量" prop="kva">
            <el-select v-model="ruleForm.kva" @charge="selectData">
              <el-option
                v-for="item in newKvaData"
                :label="item.label"
                :value="item.label"
              />
            </el-select>
            <el-button @click="showKva">请选择</el-button>
          </el-form-item>
          <el-form-item label="电压等级" prop="voltageLevel">
            <el-select v-model="ruleForm.voltageLevel" @change="selectData">
              <el-option
                v-for="item in voltageLevelData"
                :label="item.label"
                :value="item.label"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="功率因数" prop="powerFactor">
            <el-select v-model="ruleForm.powerFactor" @change="selectData">
              <el-option
                v-for="item in powerFactorData"
                :label="item.label"
                :value="item.label"
              />
            </el-select>
            <el-button @click="showPowerFactor">请选择</el-button>
          </el-form-item>
          <el-form-item label="核算方案" prop="accountingPlan">
            <el-input v-model="ruleForm.accountingPlan" />
            <el-button @click="showAccountingPlan">请选择</el-button>
          </el-form-item>
        </el-form>
      </div>
    </fieldset>
    <!-- 弹窗 -->
    <EleType
      :position="position"
      :eleTypeVisible="eleTypeVisible"
      @is-show="isShow"
    ></EleType>
    <Kva :position="position" :kvaVisible="kvaVisible" @is-show="isShow"></Kva>
    <PowerFactor
      :powerFactorVisible="powerFactorVisible"
      @is-show="isShow"
    ></PowerFactor>
    <AccountingPlan
      :position="position"
      :accountingPlanVisible="accountingPlanVisible"
      @is-show="isShow"
      @calculateFormula="calculateFormula"
    ></AccountingPlan>
  </div>
</template>
<script setup>
import { ref, watch, reactive, onMounted } from "vue";
import { ElNotification } from "element-plus";
import {
  transformerData,
  kvaData,
  voltageLevelData,
  powerFactorData,
} from "@/gm/comm.js";
import EleType from "@/components/dialog/eleType.vue";
import Kva from "@/components/dialog/kva.vue";
import PowerFactor from "@/components/dialog/powerFactor.vue";
import AccountingPlan from "@/components/dialog/accountingPlan.vue";
import { useAppStore } from "@/stores";
import { storeToRefs } from "pinia";
const useApp = useAppStore();
let { currentEleType, lossParameters } = storeToRefs(useApp);

const emit = defineEmits(["calculateFormulas"]);
const props = defineProps({
  ruleForm: Object,
  position: String,
});
const rules = ref([]);
const newKvaData = ref([]);
const ruleFormRef = ref();
const eleTypeVisible = ref(false);
const kvaVisible = ref(false);
const powerFactorVisible = ref(false);
const accountingPlanVisible = ref(false);
const showEleType = () => {
  eleTypeVisible.value = true;
};
const isShow = () => {
  eleTypeVisible.value = false;
  kvaVisible.value = false;
  powerFactorVisible.value = false;
  accountingPlanVisible.value = false;
  emit("calculateFormulas", "");
};
const showKva = () => {
  kvaVisible.value = true;
};
const showPowerFactor = () => {
  powerFactorVisible.value = true;
};
const showAccountingPlan = () => {
  accountingPlanVisible.value = true;
};
onMounted(() => {
  newKvaData.value = kvaData.filter((item) => item.type === 1);
});
//核算
const calculateFormula = (parm1) => {
  //  ruleForm.accountingPlan = parm1.name;
  emit("calculateFormulas", parm1.name);
};
const selectData = () => {
  emit("calculateFormulas", "");
};
</script>

<style lang="scss" scoped>
.electricity-info {
  .ruleForm {
    .el-form-item {
      margin-bottom: 15px;
    }
    .el-input {
      width: 32%;
    }
    .el-select {
      width: 32%;
    }
    .el-button {
      margin-left: 10px;
      width: 80px;
    }
  }
}
</style>
